import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import { propertiesConfig } from './data';

const HIGH_PRIORITY = 1500;

/**
 * 自定义每个节点渲染
 */
export default class CustomRenderer extends BaseRenderer {
  constructor(eventBus, bpmnRenderer, modeling) {
    super(eventBus, HIGH_PRIORITY);
    this.bpmnRenderer = bpmnRenderer;
    this.modeling = modeling;
  }
  canRender(element) {
    return !element.labelTarget;
  }
  drawShape(parentNode, element) {
    const type = element.type; // 获取到自定义渲染的类型
    if (propertiesConfig[type]) {
      if (
        type == 'bpmn:EndEvent' ||
        type == 'bpmn:StartEvent' ||
        type.indexOf('Gateway') != -1
      ) {
        element.width = 40;
        element.height = 40;
      } else {
        element.width = 90;
        element.height = 70;
      }
      let shape = this.bpmnRenderer.drawShape(parentNode, element);
      setShapeProperties(shape, element); // 在此修改shape
      return shape;
    }
    const shape = this.bpmnRenderer.drawShape(parentNode, element);
    return shape;
  }
}

function setShapeProperties(shape, element) {
  const type = element.type; // 获取到的类型
  const properties = propertiesConfig[type];
  for (let i = 0; i < shape.parentNode.children.length; i++) {
    Object.keys(properties).forEach((prop) => {
      shape.parentNode.children
        .item(i)
        .style.setProperty(prop, properties[prop]);
    });
  }
}

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer', 'modeling'];
